<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>二十四节气莲生长关系图系统</title>
    <script src="./echarts.min.js"></script>
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;700&display=swap" rel="stylesheet">
    <style>
        :root {
            --spring: #7cb342;
            --summer: #e53935;
            --autumn: #fb8c00;
            --winter: #1e88e5;
            --spring-light: #c8e6c9;
            --summer-light: #ffcdd2;
            --autumn-light: #ffe0b2;
            --winter-light: #bbdefb;
            --text-primary: #2e3a4d;
            --text-secondary: #5a6872;
            --bg-color: #f5f7fa;
            --card-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
        }

        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        body {
            font-family: 'Noto Sans SC', 'Microsoft YaHei', sans-serif;
            background: var(--bg-color);
            color: var(--text-primary);
            margin: 0;
            padding: 20px;
            line-height: 1.6;
        }

        .container {
            max-width: 1400px;
            margin: 0 auto;
            padding: 0 15px;
        }

        .view-tabs {
            display: flex;
            justify-content: center;
            gap: 15px;
            margin-bottom: 30px;
            flex-wrap: wrap;
        }

        .view-btn {
            padding: 12px 28px;
            border: none;
            border-radius: 30px;
            cursor: pointer;
            font-size: 16px;
            font-weight: 500;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            color: white;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
            background: #5a67d8;
            position: relative;
            overflow: hidden;
        }

        .view-btn::after {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 5px;
            height: 5px;
            background: rgba(255, 255, 255, 0.5);
            opacity: 0;
            border-radius: 100%;
            transform: scale(1, 1) translate(-50%, -50%);
            transform-origin: 50% 50%;
        }
      
        .view-btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 15px rgba(0,0,0,0.15);
        }

        .view-btn.active {
            transform: scale(1.05);
            box-shadow: 0 5px 15px rgba(0,0,0,0.2);
            font-weight: 600;
            background: #434190;
        }

        .chart-group {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(600px, 1fr));
            gap: 25px;
            margin-bottom: 30px;
        }

        .chart-container {
            background: white;
            border-radius: 12px;
            padding: 20px;
            box-shadow: var(--card-shadow);
            height: auto;
            min-height: 500px;
            display: flex;
            flex-direction: column;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        .chart-container:hover {
            transform: translateY(-5px);
            box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12);
        }

        .chart-wrapper {
            flex: 1;
            min-height: 400px;
            width: 100%;
        }

        h1 {
            text-align: center;
            color: #2c5f2d;
            margin: 20px 0 30px;
            position: relative;
            font-weight: 600;
            font-size: 2.2rem;
        }

        h1::after {
            content: "";
            display: block;
            width: 120px;
            height: 4px;
            background: linear-gradient(to right, #5a67d8, #434190, #5a67d8);
            margin: 15px auto 0;
            border-radius: 2px;
        }

        .description {
            text-align: center;
            color: var(--text-secondary);
            max-width: 800px;
            margin: 0 auto 30px;
            font-size: 16px;
            line-height: 1.7;
        }

        .tooltip-custom {
            background: rgba(255, 255, 255, 0.95) !important;
            border-radius: 8px !important;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15) !important;
            border: none !important;
            padding: 12px 16px !important;
            color: var(--text-primary) !important;
        }

        .tooltip-title {
            font-weight: 600;
            margin-bottom: 6px;
            color: var(--text-primary);
            font-size: 15px;
        }

        .tooltip-item {
            display: flex;
            align-items: center;
            margin: 4px 0;
        }

        .tooltip-marker {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            display: inline-block;
            margin-right: 8px;
        }

        @media (max-width: 768px) {
            .chart-group {
                grid-template-columns: 1fr;
            }
            
            .view-tabs {
                gap: 10px;
            }
            
            .view-btn {
                padding: 10px 18px;
                font-size: 14px;
            }

            h1 {
                font-size: 1.8rem;
                margin-bottom: 20px;
            }

            .chart-container {
                padding: 15px;
                min-height: 450px;
            }
        }

        /* 加载动画 */
        .loading {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100px;
        }

        .loading-spinner {
            width: 40px;
            height: 40px;
            border: 4px solid #f3f3f3;
            border-top: 4px solid #5a67d8;
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        /* 自定义滚动条 */
        ::-webkit-scrollbar {
            width: 8px;
            height: 8px;
        }

        ::-webkit-scrollbar-track {
            background: #f1f1f1;
            border-radius: 4px;
        }

        ::-webkit-scrollbar-thumb {
            background: #c1c1c1;
            border-radius: 4px;
        }

        ::-webkit-scrollbar-thumb:hover {
            background: #a8a8a8;
        }
        
    </style>
</head>
<body>
    <div class="container">
        <h1>二十四节气莲生长关系图系统</h1>
        
        <p class="description">
            本系统通过树状图和关系图直观展示二十四节气与莲生长周期的关系，帮助理解不同节气下莲的生理变化和农事管理要点。
            点击下方按钮切换不同视图，鼠标悬停在节点上可查看详细信息。
        </p>
        
        <div class="view-tabs">
            <button class="view-btn active" onclick="loadView('tree')">节气生长树状图</button>
            <button class="view-btn" onclick="loadView('graph')">生长关系网络图</button>
            <button class="view-btn" onclick="loadView('both')">双视图对比</button>
        </div>

        <div class="chart-group" id="chartContainer">
            <div class="loading">
                <div class="loading-spinner"></div>
            </div>
        </div>
          <!-- 在按钮组后添加筛选控件 -->
          <div class="filter-controls">
            <div class="season-filter">
                <span>季节高亮：</span>
                <button class="filter-btn spring active" data-season="spring">春</button>
                <button class="filter-btn summer" data-season="summer">夏</button>
                <button class="filter-btn autumn" data-season="autumn">秋</button>
                <button class="filter-btn winter" data-season="winter">冬</button>
            </div>
        </div>
    </div>

    <script>
        // 二十四节气数据
        const solarTermsData = {
            name: "莲生长周期",
            children: [
                {
                    name: "春季",
                    itemStyle: { color: '#7cb342' },
                    children: [
                        { 
                            name: "立春", 
                            value: "萌芽初期",
                            itemStyle: { color: '#a3d2a5' },
                            tip: "气温开始回升，水温8-10℃，进行清塘消毒"
                        },
                        { 
                            name: "雨水", 
                            value: "萌芽期",
                            itemStyle: { color: '#a3d2a5' },
                            tip: "水温10-12℃，施底肥准备种藕"
                        },
                        { 
                            name: "惊蛰", 
                            value: "种藕期",
                            itemStyle: { color: '#a3d2a5' },
                            tip: "气温稳定在10℃以上，开始种藕，保持浅水"
                        },
                        { 
                            name: "春分", 
                            value: "生长期",
                            itemStyle: { color: '#a3d2a5' },
                            tip: "莲藕快速生长，追施氮肥，防治病虫害"
                        },
                        { 
                            name: "清明", 
                            value: "浮叶期",
                            itemStyle: { color: '#a3d2a5' },
                            tip: "浮叶大量生长，加深水位，及时除草"
                        },
                        { 
                            name: "谷雨", 
                            value: "壮苗期",
                            itemStyle: { color: '#a3d2a5' },
                            tip: "莲株旺盛生长，补充磷钾肥，预防叶腐病"
                        }
                    ]
                },
                {
                    name: "夏季",
                    itemStyle: { color: '#e53935' },
                    children: [
                        { 
                            name: "立夏", 
                            value: "立叶期",
                            itemStyle: { color: '#ffcdd2' },
                            tip: "立杆叶出现，保持水位稳定，追施花肥"
                        },
                        { 
                            name: "小满", 
                            value: "花芽期",
                            itemStyle: { color: '#ffcdd2' },
                            tip: "蚜虫、斜纹夜蛾易发，防治虫害，调节水质"
                        },
                        { 
                            name: "芒种", 
                            value: "盛花期",
                            itemStyle: { color: '#ffcdd2' },
                            tip: "进入盛花期，补钾肥促进开花，摘除老叶"
                        },
                        { 
                            name: "夏至", 
                            value: "高温期",
                            itemStyle: { color: '#ffcdd2' },
                            tip: "一年中水温最高，加深水位防热害，保持通风"
                        },
                        { 
                            name: "小暑", 
                            value: "采收初期",
                            itemStyle: { color: '#ffcdd2' },
                            tip: "开始采收早期莲蓬，防治腐败病和褐斑病"
                        },
                        { 
                            name: "大暑", 
                            value: "盛采期",
                            itemStyle: { color: '#ffcdd2' },
                            tip: "莲蓬盛采期，高温下定期换水降温"
                        }
                    ]
                },
                {
                    name: "秋季",
                    itemStyle: { color: '#fb8c00' },
                    children: [
                        { 
                            name: "立秋", 
                            value: "结实初期",
                            itemStyle: { color: '#ffe0b2' },
                            tip: "气温回落，追施壮籽肥，继续采收莲蓬"
                        },
                        { 
                            name: "处暑", 
                            value: "结实期",
                            itemStyle: { color: '#ffe0b2' },
                            tip: "选择健壮植株留种，注意种子成熟度"
                        },
                        { 
                            name: "白露", 
                            value: "采藕准备",
                            itemStyle: { color: '#ffe0b2' },
                            tip: "荷花凋谢，地下茎膨大，逐步降低水位"
                        },
                        { 
                            name: "秋分", 
                            value: "采藕初期",
                            itemStyle: { color: '#ffe0b2' },
                            tip: "藕开始成熟，可陆续采收，留种田保持水深"
                        },
                        { 
                            name: "寒露", 
                            value: "采藕盛期",
                            itemStyle: { color: '#ffe0b2' },
                            tip: "大量采藕，清选种子，消毒后储存"
                        },
                        { 
                            name: "霜降", 
                            value: "采藕末期",
                            itemStyle: { color: '#ffe0b2' },
                            tip: "采藕结束，清理荷塘，准备越冬"
                        }
                    ]
                },
                {
                    name: "冬季",
                    itemStyle: { color: '#1e88e5' },
                    children: [
                        { 
                            name: "立冬", 
                            value: "休眠初期",
                            itemStyle: { color: '#bbdefb' },
                            tip: "保持水深防冻，北方可覆盖保温材料"
                        },
                        { 
                            name: "小雪", 
                            value: "深水期",
                            itemStyle: { color: '#bbdefb' },
                            tip: "加深水位至40-50cm，利用水层保温"
                        },
                        { 
                            name: "大雪", 
                            value: "越冬期",
                            itemStyle: { color: '#bbdefb' },
                            tip: "定期巡查池塘，防止种藕受冻"
                        },
                        { 
                            name: "冬至", 
                            value: "严寒期",
                            itemStyle: { color: '#bbdefb' },
                            tip: "一年中最冷，确保50-80cm水深越冬"
                        },
                        { 
                            name: "小寒", 
                            value: "冰层期",
                            itemStyle: { color: '#bbdefb' },
                            tip: "破冰补氧，仓库种藕保持适宜温湿度"
                        },
                        { 
                            name: "大寒", 
                            value: "准备期",
                            itemStyle: { color: '#bbdefb' },
                            tip: "准备春季清塘和种植计划，检修工具"
                        }
                    ]
                }
            ]
        };

        // 关系图数据
        const relationData = {
            categories: [
                { name: '春季' },
                { name: '夏季' },
                { name: '秋季' },
                { name: '冬季' }
            ],
            nodes: [
                { name: '莲生长周期', category: -1, symbolSize: 50, itemStyle: { color: '#5a67d8' } },
                
                // 春季节点
                { name: '春季', category: 0, symbolSize: 30, itemStyle: { color: '#7cb342' } },
                { name: '立春', category: 0, symbolSize: 20, itemStyle: { color: '#a3d2a5' } },
                { name: '雨水', category: 0, symbolSize: 20, itemStyle: { color: '#a3d2a5' } },
                { name: '惊蛰', category: 0, symbolSize: 20, itemStyle: { color: '#a3d2a5' } },
                { name: '春分', category: 0, symbolSize: 20, itemStyle: { color: '#a3d2a5' } },
                { name: '清明', category: 0, symbolSize: 20, itemStyle: { color: '#a3d2a5' } },
                { name: '谷雨', category: 0, symbolSize: 20, itemStyle: { color: '#a3d2a5' } },
                
                // 夏季节点
                { name: '夏季', category: 1, symbolSize: 30, itemStyle: { color: '#e53935' } },
                { name: '立夏', category: 1, symbolSize: 20, itemStyle: { color: '#ffcdd2' } },
                { name: '小满', category: 1, symbolSize: 20, itemStyle: { color: '#ffcdd2' } },
                { name: '芒种', category: 1, symbolSize: 20, itemStyle: { color: '#ffcdd2' } },
                { name: '夏至', category: 1, symbolSize: 20, itemStyle: { color: '#ffcdd2' } },
                { name: '小暑', category: 1, symbolSize: 20, itemStyle: { color: '#ffcdd2' } },
                { name: '大暑', category: 1, symbolSize: 20, itemStyle: { color: '#ffcdd2' } },
                
                // 秋季节点
                { name: '秋季', category: 2, symbolSize: 30, itemStyle: { color: '#fb8c00' } },
                { name: '立秋', category: 2, symbolSize: 20, itemStyle: { color: '#ffe0b2' } },
                { name: '处暑', category: 2, symbolSize: 20, itemStyle: { color: '#ffe0b2' } },
                { name: '白露', category: 2, symbolSize: 20, itemStyle: { color: '#ffe0b2' } },
                { name: '秋分', category: 2, symbolSize: 20, itemStyle: { color: '#ffe0b2' } },
                { name: '寒露', category: 2, symbolSize: 20, itemStyle: { color: '#ffe0b2' } },
                { name: '霜降', category: 2, symbolSize: 20, itemStyle: { color: '#ffe0b2' } },
                
                // 冬季节点
                { name: '冬季', category: 3, symbolSize: 30, itemStyle: { color: '#1e88e5' } },
                { name: '立冬', category: 3, symbolSize: 20, itemStyle: { color: '#bbdefb' } },
                { name: '小雪', category: 3, symbolSize: 20, itemStyle: { color: '#bbdefb' } },
                { name: '大雪', category: 3, symbolSize: 20, itemStyle: { color: '#bbdefb' } },
                { name: '冬至', category: 3, symbolSize: 20, itemStyle: { color: '#bbdefb' } },
                { name: '小寒', category: 3, symbolSize: 20, itemStyle: { color: '#bbdefb' } },
                { name: '大寒', category: 3, symbolSize: 20, itemStyle: { color: '#bbdefb' } }
            ],
            links: [
                // 主连接
                { source: '莲生长周期', target: '春季', value: '萌芽生长期' },
                { source: '莲生长周期', target: '夏季', value: '旺盛开花期' },
                { source: '莲生长周期', target: '秋季', value: '结实采藕期' },
                { source: '莲生长周期', target: '冬季', value: '休眠越冬期' },
                
                // 春季连接
                { source: '春季', target: '立春', value: '萌芽初期' },
                { source: '春季', target: '雨水', value: '萌芽期' },
                { source: '春季', target: '惊蛰', value: '种藕期' },
                { source: '春季', target: '春分', value: '生长期' },
                { source: '春季', target: '清明', value: '浮叶期' },
                { source: '春季', target: '谷雨', value: '壮苗期' },
                
                // 夏季连接
                { source: '夏季', target: '立夏', value: '立叶期' },
                { source: '夏季', target: '小满', value: '花芽期' },
                { source: '夏季', target: '芒种', value: '盛花期' },
                { source: '夏季', target: '夏至', value: '高温期' },
                { source: '夏季', target: '小暑', value: '采收初期' },
                { source: '夏季', target: '大暑', value: '盛采期' },
                
                // 秋季连接
                { source: '秋季', target: '立秋', value: '结实初期' },
                { source: '秋季', target: '处暑', value: '结实期' },
                { source: '秋季', target: '白露', value: '采藕准备' },
                { source: '秋季', target: '秋分', value: '采藕初期' },
                { source: '秋季', target: '寒露', value: '采藕盛期' },
                { source: '秋季', target: '霜降', value: '采藕末期' },
                
                // 冬季连接
                { source: '冬季', target: '立冬', value: '休眠初期' },
                { source: '冬季', target: '小雪', value: '深水期' },
                { source: '冬季', target: '大雪', value: '越冬期' },
                { source: '冬季', target: '冬至', value: '严寒期' },
                { source: '冬季', target: '小寒', value: '冰层期' },
                { source: '冬季', target: '大寒', value: '准备期' },
                
                // 季节间连接
                { source: '谷雨', target: '立夏', value: '季节过渡', lineStyle: { type: 'dashed' } },
                { source: '大暑', target: '立秋', value: '季节过渡', lineStyle: { type: 'dashed' } },
                { source: '霜降', target: '立冬', value: '季节过渡', lineStyle: { type: 'dashed' } },
                { source: '大寒', target: '立春', value: '季节过渡', lineStyle: { type: 'dashed' } }
            ]
        };

        // 加载视图
        function loadView(viewType) {
            // 更新活跃按钮样式
            document.querySelectorAll('.view-btn').forEach(btn => {
                btn.classList.remove('active');
            });
            document.querySelector(`.view-btn:nth-child(${viewType === 'tree' ? 1 : viewType === 'graph' ? 2 : 3})`).classList.add('active');
            
            const container = document.getElementById('chartContainer');
            container.innerHTML = '';
            
            if (viewType === 'tree') {
                createTreeChart(container);
            } else if (viewType === 'graph') {
                createRelationChart(container);
            } else {
                createTreeChart(container);
                createRelationChart(container);
            }
        }
        
        // 创建树状图
        function createTreeChart(container) {
            const chartDom = document.createElement('div');
            chartDom.className = 'chart-container';
            container.appendChild(chartDom);
            
            const chart = echarts.init(chartDom);
            
            // 自定义tooltip
            const tooltipFormatter = function(info) {
                const value = info.data.value ? `<div style="margin-top:6px;color:#666;">${info.data.value}</div>` : '';
                const tip = info.data.tip ? `<div style="margin-top:8px;color:#5a67d8;font-weight:500;">${info.data.tip}</div>` : '';
                
                return `
                    <div class="tooltip-custom">
                        <div class="tooltip-title">${info.name}</div>
                        ${value}
                        ${tip}
                    </div>
                `;
            };
            
            const option = {
                title: {
                    text: '二十四节气莲生长树状图',
                    left: 'center',
                    top: 10,
                    textStyle: {
                        color: '#5a67d8',
                        fontSize: 16,
                        fontWeight: 'bold'
                    }
                },
                tooltip: {
                    trigger: 'item',
                    triggerOn: 'mousemove',
                    formatter: tooltipFormatter,
                    className: 'tooltip-custom'
                },
                series: [
                    {
                        type: 'tree',
                        data: [solarTermsData],
                        symbol: 'roundRect',
                        symbolSize: 12,
                        orient: 'vertical',
                        expandAndCollapse: true,
                        initialTreeDepth: 3,
                        label: {
                            position: 'top',
                            rotate: 0,
                            verticalAlign: 'middle',
                            align: 'center',
                            fontSize: 12,
                            fontWeight: 'bold',
                            color: '#333',
                            formatter: function(params) {
                                return params.name.length > 3 ? params.name : `${params.name}\n${params.data.value || ''}`;
                            }
                        },
                        leaves: {
                            label: {
                                position: 'right',
                                verticalAlign: 'middle',
                                align: 'left'
                            }
                        },
                        emphasis: {
                            focus: 'descendant'
                        },
                        itemStyle: {
                            borderColor: '#eee'
                        },
                        lineStyle: {
                            color: '#ccc',
                            width: 2,
                            curveness: 0.3
                        },
                        animationDurationUpdate: 750
                    }
                ]
            };
            
            chart.setOption(option);
            
            // 响应式调整
            window.addEventListener('resize', function() {
                chart.resize();
            });
            
            // 点击事件
            chart.on('click', function(params) {
                console.log('点击了节点:', params.name);
            });
        }
        
        // 创建关系图
        function createRelationChart(container) {
            const chartDom = document.createElement('div');
            chartDom.className = 'chart-container';
            container.appendChild(chartDom);
            
            const chart = echarts.init(chartDom);
            
            // 自定义tooltip
            const tooltipFormatter = function(params) {
                if (params.dataType === 'edge') {
                    return `
                        <div class="tooltip-custom">
                            <div class="tooltip-title">${params.data.source} → ${params.data.target}</div>
                            <div>关系: <span style="color:#5a67d8;font-weight:500;">${params.data.value}</span></div>
                        </div>
                    `;
                } else {
                    const season = ['春季', '夏季', '秋季', '冬季'].includes(params.name) ? 
                        `<div style="margin-top:6px;color:#666;">${params.name}节气</div>` : '';
                    const value = params.data.value ? `<div style="margin-top:6px;color:#666;">${params.data.value}</div>` : '';
                    
                    return `
                        <div class="tooltip-custom">
                            <div class="tooltip-title">${params.name}</div>
                            ${season}
                            ${value}
                        </div>
                    `;
                }
            };
            
            const option = {
                title: {
                    text: '莲生长周期关系图',
                    left: 'center',
                    top: 10,
                    textStyle: {
                        color: '#5a67d8',
                        fontSize: 16,
                        fontWeight: 'bold'
                    }
                },
                tooltip: {
                    formatter: tooltipFormatter,
                    className: 'tooltip-custom'
                },
                legend: {
                    data: ['春季', '夏季', '秋季', '冬季'],
                    top: 40,
                    textStyle: {
                        fontSize: 12
                    }
                },
                animationDurationUpdate: 1500,
                animationEasingUpdate: 'quinticInOut',
                series: [
                    {
                        type: 'graph',
                        layout: 'force',
                        force: {
                            repulsion: 200,
                            edgeLength: [50, 150],
                            gravity: 0.1
                        },
                        roam: true,
                        draggable: true,
                        focusNodeAdjacency: true,
                        categories: relationData.categories,
                        data: relationData.nodes,
                        links: relationData.links,
                        edgeSymbol: ['none', 'arrow'],
                        edgeSymbolSize: [4, 10],
                        edgeLabel: {
                            show: true,
                            formatter: '{@value}',
                            fontSize: 10
                        },
                        label: {
                            show: true,
                            position: 'inside',
                            fontSize: 12,
                            fontWeight: 'bold'
                        },
                        lineStyle: {
                            width: 1.5,
                            curveness: 0.2
                        },
                        emphasis: {
                            lineStyle: {
                                width: 3
                            }
                        }
                    }
                ]
            };
            
            chart.setOption(option);
            
            // 响应式调整
            window.addEventListener('resize', function() {
                chart.resize();
            });
            
            // 点击事件
            chart.on('click', function(params) {
                console.log('点击了节点:', params.name);
            });
        }
        
        // 默认加载树状图
        loadView('tree');
    </script>
</body>
</html>